/*
 * @Author: xiaosihan 
 * @Date: 2024-07-23 20:56:01 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-09-22 23:57:59
 */

import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./partsLibrary.module.less";
import PCHeader from "../PCHeader/PCHeader";
import { Button, Table, Tag, Dropdown, Tooltip, Breadcrumb } from "antd";
import partsLibraryStore from "./partsLibraryStore";
import hashHistory from "@hashHistory";
import { PartData } from "@type";
import { Image } from 'antd';
import icon1PNG from "./icon1.png";
import icon2PNG from "./icon2.png";
import icon3PNG from "./icon3.png";
import icon4PNG from "./icon4.png";
import partsApi from "@api/partsApi";
import utils from "@utils";
import { includes } from "lodash";
import fileLookModalStore from "../component/FileLookModal/fileLookModalStore";
import clsx from "clsx";
import partCollaborateStore from "../PartCollaborate/partCollaborateStore";

interface Iprops {
    children?: ReactNode
}

// 零件库
export default function PartsLibrary() {

    const dom = useRef<HTMLDivElement | null>(null);
    const [data, setData] = useState({});
    const [category, setCategory] = useState(partsLibraryStore.category);
    const [partList, setPartList] = useState(partsLibraryStore.partList);
    const [page, setPage] = useState(partsLibraryStore.page);
    const [totalCount, setTotalCount] = useState(partsLibraryStore.totalCount);

    useEffect(() => {
        partsLibraryStore.getPartList();
    }, []);

    useEffect(() => autorun(() => {
        setCategory(partsLibraryStore.category);
        setPartList(partsLibraryStore.partList);
        setPage(partsLibraryStore.page);
        setTotalCount(partsLibraryStore.totalCount);
    }), []);

    const dataSource: Array<any> = partList.map(p => {
        return {
            key: p.id,
            ...p
        }
    });

    const columns = [
        {
            title: '项目零部件/附件',
            align: "center",
            dataIndex: 'id',
            key: 'id',
            render(id: string, p: PartData) {
                return (
                    <div className={styles.part_info} >
                        <Image.PreviewGroup>
                            <Image width={36} src={p.thumbnailUrl} />
                        </Image.PreviewGroup>
                        <p className={styles.part_id} >{p.name}</p>
                        <p className={styles.part_size} >{p.size}</p>
                    </div>
                );
            }
        },
        {
            title: '类型',
            align: "center",
            dataIndex: 'typeName',
            key: 'typeName',
            render(typeName: string) {
                return <span style={{ display: "inline-block", minWidth: 120 }} >{typeName}</span>
            }
        },
        {
            title: '附件',
            align: "center",
            dataIndex: 'name',
            key: 'name',
            render(d: string, p: PartData) {
                return <div className={styles.names} >
                    {
                        p.attachments.map((a, i) => {
                            if (["png", "jpg", "jpeg", "webp"].includes(utils.getSuffix(a.name))) {
                                return (
                                    <Tag
                                        key={i}
                                        color="green"
                                        className={styles.cursor_pointer}
                                        onClick={() => {
                                            fileLookModalStore.setPath(a.url);
                                        }}
                                    >{a.name}</Tag>
                                )
                            } else {
                                return (
                                    <Tag key={i} >{a.name}</Tag>
                                )
                            }
                        })
                    }
                </div>;
            }
        },
        {
            title: '状态',
            align: "center",
            dataIndex: 'statu',
            key: 'statu',
            render() {
                return (
                    <Tag color="green" >草稿</Tag>
                );
            }
        },
        {
            title: '操作',
            align: "center",
            dataIndex: 'statu',
            key: 'operate',
            render(statu: string, p: PartData) {
                return (
                    <div className={styles.operate} >

                        <Tooltip
                            placement="top"
                            title="加工"
                            mouseEnterDelay={0}
                            mouseLeaveDelay={0}
                        >
                            <img className={styles.icon} src={icon1PNG} alt="" />
                        </Tooltip>

                        <Tooltip
                            placement="top"
                            title="查看详情"
                            mouseEnterDelay={0}
                            mouseLeaveDelay={0}
                        >
                            <img
                                className={styles.icon}
                                onClick={() => {
                                    hashHistory.push(`/partsDetails/${p.id}`);
                                }}
                                src={icon2PNG} alt="" />
                        </Tooltip>


                        <Tooltip
                            rootClassName={styles.delete_tip}
                            placement="top"
                            mouseEnterDelay={0}
                            trigger={["click"]}
                            title={
                                <Button
                                    danger
                                    type="primary"
                                    size="small"
                                    onClick={async () => {
                                        await partsApi.delete(p.id);
                                        partsLibraryStore.getPartList();
                                    }}
                                >确认删除</Button>
                            }
                        >
                            <img className={clsx(styles.icon, styles.delete)} src={icon4PNG} alt="" />
                        </Tooltip>

                        <Tooltip
                            title="协作"
                            placement="top"
                            mouseEnterDelay={0}
                            mouseLeaveDelay={0}
                        >
                            <img
                                className={styles.icon}
                                onClick={() => {
                                    partCollaborateStore.setFormPath("/partsLibrary", "所有文件");
                                    hashHistory.push(`/partCollaborate/${p.id}`)
                                }}
                                src={icon3PNG}
                                alt="" />
                        </Tooltip>


                    </div>
                );
            }
        },
    ];



    return (
        <div className={styles.partsLibrary} >
            <PCHeader />
            <div className={styles.title} >
                <Breadcrumb
                    className={styles.breadcrumb}
                    items={[
                        {
                            title: <a>个人中心</a>,
                            onClick() {
                                hashHistory.push("/userCenter");
                            }
                        },
                        { title: "所有零部件", }
                    ]}
                />
                <p className={styles.subTitle} >您的所有文件，会按上传的先后顺序显示在这里，方便集中查看和整理到文件夹。</p>
            </div>
            <div className={styles.btns} >
                <Button
                    size="small"
                    type={category === "" ? "primary" : "default"}
                    onClick={() => partsLibraryStore.setCategory("")}
                >所有模型</Button>

                <Button
                    size="small"
                    type={category === "collaborate" ? "primary" : "default"}
                    onClick={() => partsLibraryStore.setCategory("collaborate")}
                >参与协作</Button>

                <Button
                    size="small"
                    type={category === "2d" ? "primary" : "default"}
                    onClick={() => partsLibraryStore.setCategory("2d")}
                >2D</Button>

                <Button
                    size="small"
                    type={category === "3d" ? "primary" : "default"}
                    onClick={() => partsLibraryStore.setCategory("3d")}
                >3D</Button>

                <Button
                    size="small"
                    type="primary"
                    onClick={() => hashHistory.push("/updataModel")}
                    className={styles.upload_part}
                >上传零部件</Button>
            </div>

            <Table
                size="small"
                dataSource={dataSource}
                columns={columns as any}
                pagination={{
                    current: page,
                    total: totalCount,
                    pageSize: 10,
                    onChange: (page: number, pageSize: number) => {
                        partsLibraryStore.setPage(page);
                    }
                }}
            />
        </div>
    );

}